import { useEffect, useRef } from "react";
import "./index.less";
import { Form, Input, Button, Row, Col } from "antd";
import { useSelected } from "slate-react";

export default (props: any) => {
  const { url, onClick,currentNode } = props;
  const ref = useRef<any>();

  useEffect(() => {
    const el = ref.current;
    if (el) {
      const domSelection = window.getSelection();
      const domRange = domSelection?.getRangeAt(0);
      if (domRange) {
        const rect = domRange.getBoundingClientRect();
        let y = rect?.top + rect.height + window.scrollY;
        const x = rect?.left + rect.width / 2 + window.scrollX;

        el.style.display = "block";
        el.style.transform = `translate3d(${x}px,${y}px,0)`;
      }
    }
  });

  const onUpdate = (event:any) => {
    event.stopPropagation();
    event.preventDefault();
    onClick?.('UPDATE') 
  };

  const onRemove = (event:any) => {
    event.stopPropagation();
    event.preventDefault();
    onClick?.('DELETE') 
  };

  const onMouseEnter = (event:any) => {  
     event.stopPropagation();
     event.preventDefault();
  };

  return (
    <div onClick={onMouseEnter} ref={ref} className="editor-link-tools" contentEditable={false}>
        <span className="tools-link">{url}</span>
        <div>
          <Button onClick={onUpdate}>修改</Button>
          <Button onClick={onRemove}>删除</Button>
        </div>
    </div>
  );
};
